<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Article List</title>
</head>
<body>
    <h1>Article List</h1>
    
    <!-- 新增文章表单 -->
    <form action="#" th:action="" method="post" style="display: flex; flex-direction: column;">
        <div style="display: flex; align-items: center;">
            <label for="title">标题:</label>
            <input type="text" id="title" name="title" required style="margin-left: 10px;">
        </div>
        <div style="display: flex; align-items: center;">
            <label for="content">内容:</label>
            <textarea id="content" name="content" rows="4" required style="margin-left: 10px;"></textarea>
        </div>
        <div style="display: flex; align-items: center;">
            <label for="author">作者:</label>
            <input type="text" id="author" name="author" required style="margin-left: 10px;">
        </div>
        <button type="submit" style="align-self: flex-start;">添加文章</button>
    </form>

    <!-- 搜索表单 -->
    <form action="#" th:action="" method="get" style="display: flex; flex-direction: column; margin-top: 20px;">
        <div style="display: flex; align-items: center;">
            <label for="searchTitle">标题:</label>
            <input type="text" id="searchTitle" name="title" style="margin-left: 10px;">
        </div>
        <div style="display: flex; align-items: center;">
            <label for="searchAuthor">作者:</label>
            <input type="text" id="searchAuthor" name="author" style="margin-left: 10px;">
        </div>
        <button type="submit" style="align-self: flex-start;">搜索</button>
    </form>

    <!-- 文章列表 -->
    <table border="1">
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        <tr th:each="article : ${articles}">
            <td th:text="${article.id}"></td>
            <td th:text="${article.title}"></td>
            <td th:text="${article.author}"></td>
            <td>
                <a th:href="@{/articles/view/{id}(id=${article.id})}">查看</a> |
                <a th:href="@{/articles/edit/{id}(id=${article.id})}">编辑</a> |
                <a th:href="@{/articles/delete/{id}(id=${article.id})}" onclick="return confirm('确定要删除吗？')">删除</a> |
                <a th:href="@{/comments/article/{id}(id=${article.id})}">评论</a>
            </td>
        </tr>
    </table>
</body>
</html>